<template>
  <div class="home">
    <HomeNavbar class="nav-bar"></HomeNavbar>
    <TagsList :tags="['流行','新款','精选']"
              selectColor="#ff5679"
              @itemClick="replaceTagListClick"
              ref="replaceTagList"
              class="replaceTagList"
              v-show="isReplaceTagListShow">
    </TagsList>
    <Scroll class="scroll-style"
            @scrollPosChange="scrollPosChange"
            ref="scroll"
            @pullingUp="pullingUp">
    <HomeScroll :banners="banners"
                class="cycle-scroll"
                @headImgFinishLoad="headImgFinishLoad">

    </HomeScroll>
    <HomeRecommend :recommend-datas="recommend" class="recommend"></HomeRecommend>
    <TagsList :tags="['流行','新款','精选']"
              selectColor="#ff5679"
              @itemClick="itemClick"
              ref="tagList">
    </TagsList>
    <HomeList :datas="this.selected" @imgFinishLoad="imgFinishLoad"></HomeList>
    </Scroll>
    <BackToTop :back-img="backToTopImg" class="home-back-to-top" v-show="isBackToTopShow" @click.native="scrollToTop"></BackToTop>

  </div>
</template>

<script>

  import HomeNavbar from './subcomponents/HomeNavbar'
  import HomeScroll from './subcomponents/HomeScroll'
  import HomeRecommend from './subcomponents/HomeRecommend'
  import HomeList from './subcomponents/HomeList'
  import BackToTop from './subcomponents/BackToTop'


  import TagsList from 'components/context/TagsList'
  import Scroll from 'components/common/scroll/Scroll'


  import Vue from 'vue'
  import {Sticky} from 'vant'

  Vue.use(Sticky)


  // 网络请求
  import {getHomeMultidata, getHomeData} from 'network/HomeRequest.js'
  // import * as HomeRequest from '../../network/HomeRequest'


  import BackToTopImg from 'assets/img/common/top.png'


  export default {
    name: "Home",
    data:function(){

      return {
        banners:[],
        recommend:[],
        popular:[],
        news:[],
        chosen:[],
        selected:[],
        backToTopImg: BackToTopImg,
        isBackToTopShow:false,
        tagListOffTop:0,
        isReplaceTagListShow:false,
        scrollLocationY:0
      }
    },
    created:function(){

      //获取头部数据信息
      this.getHomeMultidata();

      //列表数据
      this.getHomeListData();
      console.log("created");
    },
    activated:function(){

      console.log(this.scrollLocationY);
      // this.$refs.scroll.scrollToPos(0,this.scrollLocationY,0);
      // this.$refs.scroll.scrollRefresh();
    },
    deactivated:function(){

      this.scrollLocationY = this.$refs.scroll.scroll.y;
    },
    destroyed:function(){

      console.log("destroyed");
    },
    mounted:function () {

      this.$bus.$on('imgFinishLoad',()=>{

        this.$refs.scroll && this.$refs.scroll.scrollRefresh();
      });
    },
    methods:{

      replaceTagListClick(index){

        this.$refs.tagList.itemClick(index);
        this.changeItemData(index)
      },

      itemClick(index){

        this.$refs.replaceTagList.itemClick(index);
        this.changeItemData(index)
      },
      changeItemData(index){

        if (index == 0){

          this.selected = this.popular;
        } else if(index == 1){

          this.selected = this.news;
        }else  if(index == 2){

          this.selected = this.chosen;
        }
      },
      getHomeMultidata(){

        getHomeMultidata().then(data=>{

          console.log(data);

          this.banners = data.data.banner.list;
          this.recommend = data.data.recommend.list;

        }).catch(error=>{

          console.log(error);
        });
      },
      getHomeListData(){

        this.popular = getHomeData(1);
        this.news = getHomeData(2);
        this.chosen = getHomeData(3);
        this.selected = this.popular;
      },
      scrollPosChange(pos){

        //console.log(pos);

        this.isBackToTopShow = -pos.y > 200;

        this.isReplaceTagListShow = -pos.y > this.tagListOffTop;


      },
      scrollToTop(){

        this.$refs.scroll.scrollToPos(0,0,100);
      },
      pullingUp(){

        console.log("到达底部");
      },
      headImgFinishLoad(){

        this.tagListOffTop = this.$refs.tagList.$el.offsetTop;
      },
      imgFinishLoad(){

        console.log("home --- imgFinishLoad");
        this.$refs.scroll && this.$refs.scroll.scrollRefresh();

      }
    },
    components:{
      HomeNavbar,
      HomeScroll,
      HomeRecommend,
      TagsList,
      HomeList,
      Scroll,
      BackToTop,
      [Sticky.name]:Sticky
    }
  }
</script>

<style scoped>

  .recommend{

    border-bottom: 10px solid #eee;

  }
  .nav-bar{

    /*position: fixed;*/
    /*left: 0px;*/
    /*top:0px;*/
    /*right: 0px;*/
    /*!*z-index: 5;*!*/
  }

  .cycle-scroll{

    width: 100%;
  }

  .home{

    position: relative;
    height: 100vh;
  }

  .scroll-style{
    position: absolute;
    left: 0px;
    right: 0px;
    top: 44px;
    bottom: 49px;
  }

  .home-back-to-top{

    z-index: 10;
    position: absolute;
    right: 10px;
    bottom: 60px;
  }
  .replaceTagList{

    position: relative;
    z-index: 10;
  }
</style>
